/*------------------------------------------------------------------
[Table of contents]

1. Styles
    1.1 Basics
    1.2 Colors
        1.2.1 Custom Colors
    1.3 Typography
    1.4 Buttons
    1.5 Animations
    1.6 Material Icons
    1.7 Flex
    1.8 Avatar Group

2. Components
    2.1 Nav
    2.2 Compose
    2.3 Message
    2.4 Channels
    2.5 Online-user
    2.6 Popup
    2.7 Notification
    2.8 Dock
    2.9 im
    2.10 Settings
    2.11 Earnings
    2.12 Onboarding
    2.13 Visitors
    2.14 FilePicker
    2.15 StylePalette
    2.16 Announcement
    2.17 VIP Info
    2.18 Image Popup
    2.19 Discover

4. Libraries
    4.1. Font-awesome
    4.3. Scroller
    4.4. Slick

/*------------------------------------------------------------------

/* ==============================
   1.1 Basics
  ============================== */

html,
body {
    font-size: 12px;
    margin: 0;
    font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
    color: #222;
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch;
}

.transparent-layer{
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.xianliao_component{
    position: relative;
    height: 100%;
    width: 100%;
    border-radius:2px;
    transition: background 0.3s ease;
    background:white;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}

.xianliao_component.image_detail__container{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.7);
}

.frame{
    /* Frame resize animation */
    /*-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;*/
    /*-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;*/
    /*-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;*/
    /*transition:width 300ms ease-in-out, height 300ms ease-in-out;*/
}

.admin_color__popover {
    z-index:10 !important;
}

.mdl-textfield__input,.mdl-textfield__label {
    font-size:14px;
}


.mdl-card {
    background:white;
    width:100%;
    min-height:0;
}
.mdl-button,h1,h2,h3,h4,h5,h6 {
    font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
    text-transform:initial;
}
.mdl-data-table {
    white-space: normal;
}
.mdl-menu__outline {
    max-width:236px;
}
.mdl-menu__item {
    width: 180px;
    white-space: normal;
    height: auto;
    line-height: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
}

.mdl-menu__item i {
    margin-right:5px;
    font-size:18px;
}

.mdl-card__supporting-text {
    width: 100%;
}
.mdl-item__item:hover {
    background-color:#eee;
}
.mdl-card--border-bottom {
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.mdl-textfield__input {
    border-bottom: 1px solid rgba(0,0,0,.3);
}
.mdl-textfield__label {
    color: rgba(0, 0, 0, .6);
}

.mdl-tabs__tab-bar__no_border {
    border-bottom: none;
}
.mdl-button {
    height: 30px;
    line-height: 30px;
}

.mdl-button_underscore {
    height: 2px;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 0px;
    transition: all 250ms ease 0s;
    transform: scale(0);
}

.mdl-button:hover .mdl-button_underscore,
.mdl-button:active .mdl-button_underscore,
.selected .mdl-button_underscore {
    transform: scale(1);
}




div,
span,
ul,
li,
a,
input {
    box-sizing: border-box;
    text-decoration: none;
    -webkit-overflow-scrolling: touch;
}
p {
    font-size:12px;
    margin:0;
}
select {
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    outline: none;
    height: 30px;
    line-height: 30px;
    width: 100%;
    font-size: 14px;
    margin: 0 0 20px 0;
    padding: 0;
    display: block;
}
a span,
a div,
i {
    -webkit-transition: all 0ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
    -moz-transition: all 0ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
    transition: all 0ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

input,
textarea,
[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

input {
    font-size:13px;
}

.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.animate {
    -webkit-transition: all 800ms cubic-bezier(0.5, 0, 0.5, 1);
    -moz-transition: all 800ms cubic-bezier(0.5, 0, 0.5, 1);
    transition: all 800ms cubic-bezier(0.5, 0, 0.5, 1);
}

/*.animate-fast {*/
/*-webkit-transition: all 400ms ease;*/
/*-moz-transition: all 400ms ease;*/
/*transition: all 400ms ease;*/
/*}*/
.align-center {
    text-align: center !important;
}

.align-left {
    text-align: left !important;
}

.align-right {
    text-align: right !important;
}

.left {
    float: left !important;
}

.right {
    float: right !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.opacity-0 {
    opacity: 0
}

.relative {
    position: relative
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.block {
    display: block
}

.inline {
    display: inline-block
}

.mt-10 {
    margin-top: 10px
}
.mb-10 {
    margin-bottom: 10px
}

.mt-20 {
    margin-top: 20px
}

.mb-20 {
    margin-bottom: 20px
}

input:focus {
    outline: none;
}

@media (min-width: 1024px) {
    .desktop-hide {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .mobile-hide {
        display: none !important;
    }
}


/* ==============================
   1.2 Colors
  ============================== */

.color-1 {
    color: #e46c7e !important
}

.color-green {
    color: #36a367 !important
}

.color-red {
    color: #ff7777 !important
}

.color-blue {
    color: #2db2ea !important
}

.color-grey {
    color: #d8d8d8 !important
}

.color-darkgrey {
    color: #777 !important
}

.color-white {
    color: #ffffff !important
}

.color-black {
    color: #222 !important
}

.bg-1 {
    background-color: #e46c7e !important
}

.bg-green {
    background-color: #36a367 !important
}

.bg-red {
    background-color: #ff7777 !important
}

.bg-blue {
    background-color: #2db2ea !important
}

.bg-grey {
    background-color: #d8d8d8 !important
}

.bg-darkgrey {
    background-color: #777 !important
}

.bg-white {
    background-color: #ffffff !important
}

.border-1 {
    border-color: #e46c7e !important
}

.border-green {
    border-color: #36a367 !important
}

.border-red {
    border-color: #ff7777 !important
}

.border-blue {
    border-color: #2db2ea !important
}

.border-grey {
    border-color: #d8d8d8 !important
}

.hover-color-1:hover {
    color: #ff6fa2 !important
}

.hover-color-green:hover {
    color: #36a367 !important
}

.hover-color-red:hover {
    color: #ff7777 !important
}

.hover-color-blue:hover {
    color: #2db2ea !important
}

.hover-color-white:hover {
    color: #ffffff !important
}
.hover-color-black:hover {
    color: #333 !important
}
.hover-color-darkgrey:hover {
    color: #777 !important
}
.hover-bg-1:hover {
    background-color: #e46c7e !important
}

.hover-bg-green:hover {
    background-color: #36a367 !important
}

.hover-bg-red:hover {
    background-color: #ff7777 !important
}

.hover-bg-blue:hover {
    background-color: #2db2ea !important
}

.hover-bg-grey:hover {
    background-color: #d8d8d8 !important
}

.hover-bg-white:hover {
    background-color: #ffffff !important
}

.hover-border-1:hover {
    border-color: #e46c7e !important;
    opacity: 1
}

.hover-border-green:hover {
    border-color: #36a367 !important
}

.hover-border-blue:hover {
    border-color: #2db2ea !important
}

.hover-border-red:hover {
    border-color: #ff7777 !important
}

.hover-border-white:hover {
    border-color: #ffffff !important
}

.focus-color-1:active,
.focus-color-1:focus {
    color: #ff6fa2
}

.focus-color-green:active,
.focus-color-green:focus {
    color: #36a367 !important
}

.focus-color-red:active,
.focus-color-red:focus {
    color: #ff7777 !important
}

.focus-color-blue:active,
.focus-color-blue:focus {
    color: #2db2ea !important
}

.focus-color-white:active,
.focus-color-white:focus {
    color: #ffffff !important
}

.focus-bg-1:active,
.focus-bg-1:focus {
    background-color: #e46c7e !important
}

.focus-bg-2:active,
.focus-bg-2:focus {
    background-color: #2db2ea !important
}

.focus-bg-green:active,
.focus-bg-green:focus {
    background-color: #36a367 !important
}

.focus-bg-red:active,
.focus-bg-red:focus {
    background-color: #ff7777 !important
}

.focus-bg-blue:active,
.focus-bg-blue:focus {
    background-color: #2db2ea !important
}

.focus-bg-grey:active,
.focus-bg-grey:focus {
    background-color: #d8d8d8 !important
}

.focus-bg-white:active,
.focus-bg-white:focus {
    background-color: #ffffff !important
}

.focus-border-1:active,
.focus-border-1:focus {
    border-color: #e46c7e !important;
    opacity: 1
}

.focus-border-2:active,
.focus-border-2:focus {
    border-color: #2db2ea !important
}

.focus-border-green:active,
.focus-border-green:focus {
    border-color: #36a367 !important
}

.focus-border-blue:active,
.focus-border-blue:focus {
    border-color: #2db2ea !important
}

.focus-border-red:active,
.focus-border-red:focus {
    border-color: #ff7777 !important
}

.focus-border-white:active,
.focus-border-white:focus {
    border-color: #ffffff !important
}


/* ==============================
   1.3 Typography
  ============================== */

h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
    margin: 0;
    padding: 0;
    list-style-type: none
}




/* ==============================
   1.4 Animation
   ============================== */



/* ==============================
   1.4 Buttons
  ============================== */

.btn {
    font-size: 11px;
    display: inline-block;
    cursor: pointer;
    text-align: center;
}

.disabled {
    cursor: default !important;
}

.btn-row {
    width: 100%;
}

.btn-border-1 {
    border: 1px solid
}

.btn-border-2 {
    border: 2px solid
}

.btn-l {
    padding: 11px 45px;
    font-size: 13px;
}

.btn-m {
    padding: 7px 37px;
    font-size: 12px;
}

.btn-s {
    padding: 5px 17px;
}

.btn-border-l {
    height: auto;
    padding: 12px 45px;
    font-size: 13px;
    border: 1px solid;
}

.btn-border-m {
    height: auto;
    padding: 8px 37px;
    font-size: 12px;
    border: 1px solid;
}

.btn-border-s {
    height: auto;
    padding: 6px 17px;
    font-size: 11px;
    border: 1px solid;
}

/* ==============================
    1.6 Material Icons
  ============================== */

/*@font-face {*/
/*font-family: 'Material Icons';*/
/*font-style: normal;*/
/*font-weight: 400;*/
/*src: local('Material Icons'),*/
/*local('MaterialIcons-Regular'),*/
/*!*url(//cdn.xianliao.me/assets/MaterialIcons-slim.woff2) format('woff');*!*/
/*!*url(//cdn.xianliao.me/assets/MaterialIcons-slim.woff) format('woff');*!*/
/*!*url(//cdn.xianliao.me/assets/MaterialIcons-slim.ttf) format('truetype');*!*/
/*url(//cdn.xianliao.me/assets/MaterialIcons-Regular.woff2) format('woff');*/
/*url(//cdn.xianliao.me/assets/MaterialIcons-Regular.woff) format('woff');*/
/*url(//cdn.xianliao.me/assets/MaterialIcons-regular.ttf) format('truetype');*/

/*}*/

.material-icons {
    font-family: 'Material Icons', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

i.material-icons {
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';}

@font-face {
    font-family: 'icomoon';
    src:
        /*url('xianliaome3.woff') format('woff'),*/
        /*url('xianliaome3.ttf') format('truetype');*/
            url('//cdn.xianliao.me/assets/xianliaome3.woff') format('woff'),
            url('//cdn.xianliao.me/assets/xianliaome3.ttf') format('truetype');
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-tag_faces:before {
    content: "\e933";
}
.icon-format_quote:before {
    content: "\e931";
}
.icon-award:before {
    content: "\e900";
}
.icon-bell:before {
    content: "\e901";
}
.icon-check:before {
    content: "\e902";
}
.icon-chevron-left:before {
    content: "\e903";
}
.icon-chevron-right:before {
    content: "\e904";
}
.icon-circle:before {
    content: "\e905";
}
.icon-clipboard:before {
    content: "\e906";
}
.icon-clock:before {
    content: "\e937";
}
.icon-corner-down-left:before {
    content: "\e907";
}
.icon-cpu:before {
    content: "\e908";
}
.icon-dollar-sign:before {
    content: "\e932";
}
.icon-download-cloud:before {
    content: "\e909";
}
.icon-droplet:before {
    content: "\e90a";
}
.icon-edit:before {
    content: "\e935";
}
.icon-feather:before {
    content: "\e934";
}
.icon-flag:before {
    content: "\e90b";
}
.icon-folder:before {
    content: "\e90c";
}
.icon-heart:before {
    content: "\e938";
}
.icon-home:before {
    content: "\e90d";
}
.icon-image:before {
    content: "\e90e";
}
.icon-info:before {
    content: "\e90f";
}
.icon-layers:before {
    content: "\e910";
}
.icon-layout:before {
    content: "\e911";
}
.icon-link-2:before {
    content: "\e912";
}
.icon-lock:before {
    content: "\e913";
}
.icon-maximize-2:before {
    content: "\e914";
}
.icon-menu:before {
    content: "\e915";
}
.icon-message-circle:before {
    content: "\e916";
}
.icon-message-square:before {
    content: "\e917";
}
.icon-minus:before {
    content: "\e918";
}
.icon-minus-circle:before {
    content: "\e919";
}
.icon-more-horizontal:before {
    content: "\e91a";
}
.icon-more-vertical:before {
    content: "\e91b";
}
.icon-navigation:before {
    content: "\e91c";
}
.icon-plus:before {
    content: "\e91d";
}
.icon-plus-circle:before {
    content: "\e91e";
}
.icon-search:before {
    content: "\e91f";
}
.icon-send:before {
    content: "\e920";
}
.icon-settings:before {
    content: "\e921";
}
.icon-share-2:before {
    content: "\e922";
}
.icon-shield:before {
    content: "\e923";
}
.icon-slash:before {
    content: "\e936";
}
.icon-sliders:before {
    content: "\e924";
}
.icon-smartphone:before {
    content: "\e925";
}
.icon-square:before {
    content: "\e926";
}
.icon-star:before {
    content: "\e939";
}
.icon-trash-2:before {
    content: "\e927";
}
.icon-upload-cloud:before {
    content: "\e928";
}
.icon-user:before {
    content: "\e929";
}
.icon-user-check:before {
    content: "\e92a";
}
.icon-user-minus:before {
    content: "\e92b";
}
.icon-user-plus:before {
    content: "\e92c";
}
.icon-user-x:before {
    content: "\e92d";
}
.icon-users:before {
    content: "\e92e";
}
.icon-x:before {
    content: "\e92f";
}
.icon-x-circle:before {
    content: "\e930";
}



/* ==============================
   1.7 Flex
  ============================== */
.flex_align_top{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: flex-start;
    align-items: stretch;
}

.flex_align_center{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: stretch;
}

.flex_align_bottom{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: flex-end;
    align-items: stretch;
}

/* ==============================
   1.8 Avatar Group
  ============================== */
.conversation-summary-avatar {
    border-radius: 10em;
    position: absolute;
    top: 0.6em;
    left: 0.6em;
    width: 2.8em;
    height: 2.8em;
}

.avatar-group-member,
.avatar-group-member {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-size:cover;
    background-position: 50%;
    background-color: white;
}

.avatar-group-member {
    overflow: hidden;
}

.avatar-group {
    overflow: hidden;
    position: relative;
}

.avatar-group[data-number-of-thumbnails="2"] .avatar-group-member:first-child {
    left: -25%;
}

.avatar-group[data-number-of-thumbnails="2"] .avatar-group-member:nth-child(2) {
    left: 50%;
}

.avatar-group[data-number-of-thumbnails="2"] .avatar-group-member:nth-child(2) .avatar-group-member {
    left: -25%;
}

.avatar-group[data-number-of-thumbnails="3"] .avatar-group-member:first-child {
    left: -25%;
}

.avatar-group[data-number-of-thumbnails="3"] .avatar-group-member:nth-child(2),
.avatar-group[data-number-of-thumbnails="3"] .avatar-group-member:nth-child(3) {
    left: 50%;
    width: 50%;
    height: 50%;
}

.avatar-group[data-number-of-thumbnails="3"] .avatar-group-member:nth-child(3) {
    top: 50%;
}

.avatar-group[data-number-of-thumbnails="4"] .avatar-group-member {
    width: 50%;
    height: 50%;
}

.avatar-group[data-number-of-thumbnails="4"] .avatar-group-member:nth-child(2),
.avatar-group[data-number-of-thumbnails="4"] .avatar-group-member:nth-child(4) {
    left: 50%;
}

.avatar-group[data-number-of-thumbnails="4"] .avatar-group-member:nth-child(3),
.avatar-group[data-number-of-thumbnails="4"] .avatar-group-member:nth-child(4) {
    top: 50%;
}


/* ==============================
   2.0 General
  ============================== */
.unread-num {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    font-weight: 600;
    font-size: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}
.progress-container {
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity:0;
    transform: translate3d(0px,20px,0px);
}

.chat__private-message .progress-container {
    top:-30px;
}
/*.progress-container.collapsed{*/
/*!*top: -50px;*!*/
/*display: none;*/
/*}*/



.progress-container.show {
    transform:translate3d(0px,30px,0px);
    opacity:1;
    z-index: 6;
}

/* Progress Bar */
.progress {
    position: relative;
    height: 2px;
    display: block;
    width: 100%;
    background-clip: padding-box;
    overflow: hidden;
}

.progress .indeterminate:before {
    content: "";
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
    infinite;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress .indeterminate:after {
    content: "";
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
    infinite;
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
    infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}

@-webkit-keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }
    60% {
        left: 100%;
        right: -90%;
    }
    100% {
        left: 100%;
        right: -90%;
    }
}
@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }
    60% {
        left: 100%;
        right: -90%;
    }
    100% {
        left: 100%;
        right: -90%;
    }
}
@-webkit-keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}
@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}



/* ==============================
   2.1 collapsed
  ============================== */

.collapsed_tab {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.collapsed_tab span {
    vertical-align:middle;
}

.collapsed_handle {
    font-size: 18px;
    color: #aaa;
    padding: 6px;
}

.collapsed_content {
    padding: 4px 7px;
    flex: 1;
    cursor: default;
    font-size:13px;
    height: 32px;
    overflow: hidden;
}

.collapsed_content:hover {
    background:#eee;
}

.collapsed_tab__unread_indicator{
    font-size: 20px;
    animation: room-active 1.8s infinite;
    vertical-align: top;
}


/* ==============================
   2.1 nav
  ============================== */

.nav {
    position: absolute;
    height: 47px;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 15;
    border-bottom: 1px solid #ddd;
}
.nav__top {
    position: relative;
    z-index: 15;
    height: auto;
    display: flex;
    align-items: center;
    padding: 5px;
    justify-content: space-between;
    cursor: move;
    border: none;
}

/*.xianliao_component:hover .nav__top {*/
/*opacity:1;*/
/*}*/


.nav__popup {
    position: relative;
    z-index: 15;
    height: 42px;
    display: flex;
    align-items: center;
    cursor:move;
    justify-content: center;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
/*.nav__collapse {*/
/*position:absolute;*/
/*left:7px;*/
/*top: 7px;*/
/*}*/
/*.nav__note {*/
/*position: absolute;*/
/*right: 42px;*/
/*top: 7px;*/
/*}*/


#nav__note__menu .mdl-button {
    text-transform: none;
    overflow: visible;
    flex: 1;
    width:200px;
    line-height: initial;
    text-align: left;
    height:auto;
    padding: 10px 16px;
}

.nav__note_unread-num {
    top: -3px;

    right: -3px;

    transform: scale(0.8);
    border:1px solid transparent;
}
.nav__settings_unread-num {
    top: -3px;
    right: -3px;
    transform: scale(0.8);
    border:1px solid transparent;
}
/*.nav__settings {*/
/*position: absolute;*/
/*right: 7px;*/
/*top: 7px;*/
/*}*/

/*.nav__private_list{*/
/*position: absolute;*/
/*right: 77px;*/
/*top: 7px;*/
/*}*/

/*.nav__announcement{*/
/*position: absolute;*/
/*right: 112px;*/
/*top: 7px;*/
/*}*/

.nav__btn_logo {
    padding: 0 10px;
    font-weight: 800;
    transition: all 0.3s ease;
    color:#333;
}

.nav__btn_logo i {
    margin-right:3px;
}

/*.nav__btn_logo:hover {*/
/*opacity:1;*/
/*background:white;*/
/*}*/

/*.nav__btn_logo.mobile{*/
/*left: 0;*/
/*}*/

.nav__logo {
    flex:1;
    font-weight:800;
    color:#ccc;
    opacity:0.3;
    background-image:url(http://cdn.xianliao.me/images/d3c80d7f6cc3b4046e73f52ef8a1994a.png);
    background-size:cover;
    background-position:50% 50%;
    background-repeat:no-repeat;
}

.nav__logo:hover {
    opacity:1;
}

.nav__menu {
    padding: 2px;
    float: right;
    position: relative;
}
.nav__save {
    position: absolute;
    left: 7px;
    top: 5px;
}
.nav__left-1 {
    position:absolute;
    left:7px;
    top: 7px;
}
.nav__right-1 {
    position:absolute;
    right:7px;
    top: 7px;
}

.nav__title {
    flex: 1;
    margin-left: 50px;
    margin-right: 50px;
    text-align: center;
    letter-spacing: 1px;
    cursor: move;
    vertical-align: middle;
}

.nav__rooms {
    width:200px;
    display:flex;
    background-color: rgba(0,0,0,0.15);
}
.nav__rooms__unread-num {
    top: 4px;
    right: 8px;
    position: absolute;
    cursor: pointer;
    width: 14px;
    height: 14px;
}


@keyframes dock-active {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-moz-keyframes dock-active {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes dock-active {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.nav__rooms__unread-num_active {
    animation: dock-active 1.8s infinite;
    width: 8px;
    height: 8px;
    /*transform: translate3d(-3px,3px,0px);*/
}

.nav__rooms .mdl-button {
    font-weight: 800;
    text-transform: none;
    overflow: visible;
    flex:1;
    width:200px
}
.nav__rooms__name {
    padding-right: 10px;
    float: left;
    text-align:center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width:100%;
    font-weight: 500;
}
.nav__rooms__name_current {
    font-weight:600;
}
.nav__rooms .mdl-button i {
    position: absolute;
    right: 5px;
    top: 6px;
}
.nav-title {
    background: 0 0;
    border: none;
    border-radius: 2px;
    position: relative;
    height: 36px;
    margin: 0;
    min-width: 64px;
    padding: 0 16px;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
    overflow: hidden;
    will-change: box-shadow;
    outline: none;
    cursor: initial;
    text-decoration: none;
    text-align: center;
    line-height: 36px;
    vertical-align: middle;
}

.draggable_handle{
    cursor: move;
}


/* ==============================
   2.2 Chat
  ============================== */


.chat{
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    flex-direction: column;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}

.chat-body-container {
    flex: 1;
    position: relative;
    display:flex;
    flex-direction:column;
    height:100%;
    overflow: hidden;
}


.ads_placeholder{
    height: 60px;
    width: 100%;
    border-radius: 10px;
}

.page_chat__header_contaienr{
    /*background: rgb(196, 138, 196);*/
    position: relative;
    height: 40px;
}

.page_chat__header_name{
    font-size: 20px;
    color: white;
    vertical-align: middle;
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
    line-height: 40px;
}

.page_chat__header_icon{
    color: white;
    vertical-align: middle;
    position: absolute;
    right: 10px;
    top: 6px;
}

/* ==============================
   2.2 Channels
  ============================== */
.channels-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*width: 100%;*/
    overflow: hidden;
    z-index:8;
    background:white;
    border-bottom: 1px solid #eee;
}

.mdc-tab-bar-scroller__indicator {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 30px;
    cursor: default;
    /*visibility: hidden;*/
    color: rgba(0, 0, 0, 0.15);
}

.mdc-tab-bar-scroller__indicator--enabled {
    /*visibility: visible;*/
    color: rgba(0, 0, 0, 0.54);
    cursor: pointer;
}

.mdc-tab-bar-scroller__indicator__inner {
    color: inherit;
    text-decoration: inherit;
    cursor: inherit;
}

.mdc-tab-bar-scroller__scroll-frame {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    overflow: hidden;
}

.mdc-tab-bar {
    display: table;
    position: relative;
    transition: all 0.3s ease;
    margin: 0 auto;
    padding-right: 250px;
    text-transform: uppercase;
}

.channels {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: inherit;
    text-transform: inherit;
    color: rgba(0, 0, 0, 0.54);
    color: var(--mdc-theme-text-secondary-on-light, rgba(0, 0, 0, 0.54));
    display: table-cell;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*min-width: 160px;*/
    /*min-height: 48px;*/
    /*padding: 0 24px;*/
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    vertical-align: middle;
}

.channels .mdl-button {
    height: 30px;
    line-height: 28px;
}

/*.xianliao_component:hover .channels-container {*/
/*opacity:1;*/
/*}*/

/*.channels-container:hover {*/
/*height:auto;*/
/*overflow:auto;*/
/*}*/

.hangouts:hover .channels-container,.hangouts:hover .hangouts__nav {
    display:flex;
}



/*.channels-list {*/

/*!*margin-bottom: -20px;*!*/
/*!*padding-bottom:20px;*!*/
/*}*/

/*.channels-list:hover {*/
/*margin-bottom:0px;*/
/*padding-bottom:0px;*/

/*}*/

/*.channels {*/
/*display: flex;*/
/*!* -webkit-flex-shrink: 0; *!*/
/*-ms-flex-negative: 0;*/
/*!* flex-shrink: 0; *!*/
/*transition: all 0.4s ease;*/
/*border: 1px solid #eee;*/
/*margin-right:-1px;*/
/*border-radius: 10px 10px 0 0;*/
/*!*overflow:hidden;*!*/
/*max-width: 185px;*/
/*flex:5;*/
/*}*/

/*.channels:hover {*/
/*flex:20;*/
/*}*/

/*.channels:hover.selected {*/
/*flex:25;*/
/*}*/

/*.channels_placeholder {*/
/*border:none;*/
/*cursor:initial;*/
/*border-bottom: 1px solid #eee;*/
/*}*/

/*.channels_placeholder:hover {*/
/*flex:5;*/
/*}*/

/*.channels:first-child {*/
/*flex:2;*/
/*}*/

/*.channels:first-child:hover {*/
/*flex:3;*/
/*}*/

/*.channels:nth-child(2) {*/
/*flex:2;*/
/*}*/

/*.channels:nth-child(2):hover {*/
/*flex:3;*/
/*}*/

/*.channels:nth-child(n+7) {*/
/*display:none;*/
/*}*/

/*.channels__mdl-button {*/
/*height: 32px;*/
/*line-height: 32px;*/
/*font-size: 12px;*/
/*padding: 0 12px;*/
/*text-align: left;*/
/*min-width: 0;*/
/*!*max-width: 150px;*!*/
/*display: -webkit-flex;*/
/*font-weight: 600;*/
/*color: rgba(0,0,0,0.65);*/
/*transition: all 0.3s ease;*/
/*border-radius: 0;*/
/*display: -ms-flexbox;*/
/*display: flex;*/
/*-webkit-flex-shrink: 0;*/
/*-ms-flex-negative: 0;*/
/*flex-shrink: 0;*/
/*-webkit-user-select: inherit;*/
/*-moz-user-select: inherit;*/
/*-ms-user-select: inherit;*/
/*user-select: inherit;*/
/*}*/


/*.channels__mdl-button {*/
/*height: 32px;*/
/*line-height: 32px;*/
/*font-size: 12px;*/
/*padding: 0;*/
/*text-align: center;*/
/*!*max-width: 80px;*!*/
/*min-width: 0;*/
/*flex: 1;*/
/*display: block;*/
/*position: relative;*/
/*font-weight: 600;*/
/*color: rgba(0,0,0,0.65);*/
/*transition: all 0.3s ease;*/
/*border-radius: 10px 10px 0 0;*/
/*-moz-user-select: inherit;*/
/*-ms-user-select: inherit;*/
/*user-select: inherit;*/
/*}*/


.channels__mdl-button:hover {
    background:#eee;
    /*max-width:150px;*/
}

.channels__mdl-button.channels_current_page {
    cursor:initial;
}

.channels__mdl-button i {
    cursor:pointer;
}

/*.channels_pinned:hover.selected{*/
/*padding-left: 20px;*/
/*}*/

/*.channels_unpinned:hover.selected{*/
/*padding-left: 20px;*/
/*padding-right: 20px;*/
/*}*/


/*.channels_hot:hover{*/
/*padding-left: 20px;*/
/*}*/

/*.channels_hot:hover.selected{*/
/*padding-left: 36px;*/
/*!*}*!*/

/*.channels_redirect:hover{*/
/*padding-right: 18px;*/
/*}*/

/*.channels_unpinned:hover.selected.channels_current_page{*/
/*padding-right: 12px;*/
/*}*/

/*.channels_unpinned:hover.selected.channels_hot{*/
/*padding-right: 12px;*/
/*}*/

/*.channels_unpinned:hover.selected.channels_redirect{*/
/*padding-right: 36px;*/
/*}*/

/*.channels_unpinned:hover.selected.channels_hot{*/
/*padding-right: 12px;*/
/*}*/
/*.channels_unpinned:hover.selected.channels_hot.channels_redirect{*/
/*padding-right: 18px;*/
/*}*/
/*.channels_current_page{*/
/*padding-left: 18px;*/
/*}*/

/*.channels__mdl-button.fetching {*/
/*padding: 0 12px;*/
/*}*/


/*.channel_right {*/
/*display:none*/
/*}*/

/*.channels:hover .channel_right{*/
/*font-size: 18px;*/
/*height: 100%;*/
/*position: absolute;*/
/*top: 0;*/
/*left: 20px;*/
/*z-index: 10;*/
/*display:block;*/
/*}*/

.channel_bookmark {
    display:none;
}

.channels:hover .channel_bookmark{
    font-size: 18px;
    width:20px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 5px;
    z-index: 10;
    display:block;
}

.channel_redirect {
    display:none;
}

.channels:hover .selected .channel_redirect{
    font-size: 18px;
    width:20px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 22px;
    z-index: 10;
    display: block;
}

.channel_edit {
    display:none
}

.channels:hover .selected .channel_edit {
    font-size: 18px;
    width:20px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 22px;
    z-index: 10;
    display: block;
}

.channel_close {
    display:none;
}

.channels:hover .channel_close{
    font-size: 18px;
    width:20px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 5px;
    z-index: 10;
    display: block;
}

.channel_discover.channels__mdl-button i,.channel_world.channels__mdl-button i {
    font-size: 20px;
    transition: all 0.4s ease;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    /* width: 32px; */
    text-align: center;
    padding: 0;
    position: relative;
}

.channel_discover:hover i {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

.channel_world:hover i {
    -ms-transform: rotateY(180deg); /* IE 9 */
    -webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
    transform: rotateY(180deg) ;
}

/*.channels_current_page .channel_left{*/
/*left: 5px;*/
/*}*/

/*.channels_current_page.channels_hot .channel_left{*/
/*left: 5px;*/
/*}*/

/*.channels_unpinned.selected .channel_redirect{*/
/*right: 15px;*/
/*}*/

/*.channels_unpinned.selected.channels_hot .channel_redirect{*/
/*right: 0;*/
/*}*/

/*.page-room_admin:hover {*/
/*padding-right:27px;*/
/*}*/

/*.page-room_admin:hover.selected.channels_current_page{*/
/*padding-right: 27px;*/
/*}*/

/*.page-room_admin:hover.channels_redirect{*/
/*padding-right: 36px;*/
/*}*/

/*.page-room_admin:hover.selected.channels_unpinned.channels_redirect{*/
/*padding-right: 48px;*/
/*}*/

/*.page-room_admin:hover.selected.channels_hot.channels_unpinned.channels_redirect{*/
/*padding-right: 36px;*/
/*}*/

/*.page-room_admin:hover.channels_hot.channels_redirect{*/
/*padding-right: 36px;*/
/*}*/

/*.page-room_admin:hover.selected.channels_unpinned{*/
/*padding-right: 36px;*/
/*}*/

/*.page-room_admin:hover.selected.channels_pinned{*/
/*padding-right: 36px;*/
/*}*/

/*.page-room_admin:hover.selected.channels_current_page.channels_unpinned{*/
/*padding-right: 27px;*/
/*}*/

/*.page-room_admin:hover.selected.channels_current_page.channels_pinned{*/
/*padding-right: 27px;*/
/*}*/

/*.selected .channel_close{*/
/*right: 0;*/
/*}*/



/*.page-room_admin.channels_redirect .channel_edit{*/
/*right: 17px;*/
/*}*/

/*.page-room_admin.selected.channels_unpinned.channels_redirect .channel_edit{*/
/*right: 27px;*/
/*}*/

/*.page-room_admin.selected.channels_unpinned.channels_redirect .channel_redirect{*/
/*right: 13px;*/
/*}*/

/*.page-room_admin.selected.channels_unpinned.channels_hot.channels_redirect .channel_redirect{*/
/*right: 0;*/
/*}*/
/*.page-room_admin.selected.channels_unpinned.channels_hot.channels_redirect .channel_edit{*/
/*right: 17px;*/
/*}*/

/*.page-room_admin.selected .channel_edit{*/
/*right: 15px;*/
/*}*/


/*.channels__mdl-button.selected {*/
/*background:#eee !important;*/
/*!*padding:0 12px;*!*/
/*}*/

.channels__mdl-button.hover-color-1 i {
    display:none;
}

.channels__mdl-button i {
    display: block;
    position: absolute;
    line-height: 32px;
    font-size: 14px;
    right: 0;
    padding-right:2px;
    top: 0;
    text-align: right;
    width: 100%;
}


.page-room_replied {

}

{

}

.channels .channels__mdl-button.page-room_empty:after {
    content: "";
    background-color: rgba(255,255,255,1);
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    left: 0;
    top:0;
    -webkit-animation: channels_highlighted 1s ease infinite;
    -moz-animation: channels_highlighted 1s ease infinite;
    animation: channels_highlighted 1s ease infinite;

}

@keyframes channels_highlighted {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0.5
    }
    100% {
        opacity: 0
    }
}

@-moz-keyframes channels_highlighted {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0.5
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes channels_highlighted {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0.5
    }
    100% {
        opacity: 0
    }
}


/*.channels__mdl-button:hover,*/
/*.channels__mdl-button_active {*/
/*color: rgb(255,122,95);*/
/*}*/

.channels .mdl-menu__outline,.channels .mdl-menu,.channels .mdl-menu li {
    width:100% !important;
    max-width:none !important;
}

.channels .mdl-menu__container {
    left: 10px !important;
    width: auto !important;
    right: 10px !important;
}

.channel-note {
    margin-top:-7px;
    margin-right:10px;
}

@keyframes room-active {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-moz-keyframes room-active {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes room-active {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.channel-active {
    font-size: 10px;
    line-height: 16px;
    vertical-align: 2px;
    margin-left:5px;
    animation: room-active 1.8s infinite;
}


/* ==============================
   2.3 Messages
  ============================== */

.message-container {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position:relative;
    width: calc(100% + 20px);
    /*border-top: 1px solid #ddd;*/
    flex:1;
    padding-right:20px;
}

.message-container:hover {
    margin-right:0;
    padding-right:0;
    width: 100%;
}

/*.message-container .expanded{*/

/*}*/

/*.message-container.collapsed{*/

/*top: 0px;*/
/*background: transparent;*/
/*}*/

.message-placeholder {
    height: 100%;
    min-height:100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 16px;
    color: rgba(0,0,0,0.4);
    text-align: center;
}


.chat-load-below-btn {
    border: 1px solid transparent;
    border-top: none;
}

.chat-load-above-btn {
    border: 1px solid transparent;
    border-bottom: none;
}

.chat-load-folded {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.chat-message {
    display: -webkit-flex;
    display:flex;
    min-height: 60px;
    /*position:relative;*/
    /*flex-direction:column;*/
    align-items:flex-start;
    word-wrap: break-word;
}


.chat-message_unread{
    background:#eee;
}

/*.chat-message_inner {*/
/*display: -webkit-flex;*/
/*display:flex;*/
/*align-items:flex-start;*/
/*}*/



/*.message-container .chat-message {*/
/*!*border-bottom:1px dashed #ddd;*!*/
/*}*/

/*.message-container .chat-message:last-child {*/
/*border-bottom: 1px dashed  #fff;*/
/*}*/

/*.chat-message_right {*/
/*flex-direction:row-reverse;*/
/*}*/

.chat-avatar {
    height: 30px;
    width: 30px;
    margin: 12px 0 0 11px;
    background: white 50%;
    border-radius: 100%;
    transition: all 0.3s ease;
    background-size: cover;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.chat-avatar__public-chat {
    cursor:pointer;
    -webkit-transition: all 200ms cubic-bezier(0.5, 0, 0.5, 1);
    -moz-transition: all 200ms cubic-bezier(0.5, 0, 0.5, 1);
    transition: all 200ms cubic-bezier(0.5, 0, 0.5, 1);
}


.chat-avatar__public-chat:hover {
    transform: scale3d(1.2,1.2,1.2);
}

.chat-content-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.chat-content-meta {
    flex:1;
}

.chat-content-control {
    display: flex;
    padding-right:3px;
}

.chat-content-control .mdl-button--icon {
    width:26px;
    height:26px;
    min-width:26px;
}

.chat-content-control i {
    font-size:18px;
}

.chat-control-more {
    opacity:0;
    transition: all 0.1s ease;
}

.chat-message:hover .chat-control-more {
    opacity:1;
}

.chat-content-control .reaction-count {
    font-size: 12px;
    margin-left: 2px;
}

.chat-content-control .mdl-menu__item {
    width:125px;
}

.chat-content {
    align-items:flex-start;
    flex:1;
    display:flex;
}

.message-container .chat-content {
    padding-bottom:10px;
}


/*.chat-content a {*/
/*display:block;*/
/*}*/

/*.chat .chat-content {*/
/*    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);*/
/*border-radius: 16px;*/
/*background:white;*/
/*}*/

.chat .chat-content span {
    vertical-align:middle;
}

.chat-content-inner {
    padding: 7px 5px 7px 10px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
    justify-content: flex-start;
}

.chat-content-text {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

/*.chat-content-text-bg{*/
/*position: absolute;*/
/*top: 0;*/
/*left: 0;*/
/*width: 100%;*/
/*height: 100%;*/
/*!*border-radius: 0px 10px 10px 10px;*!*/
/*opacity: 0.1;*/
/*z-index: -10;*/
/*}*/

/*.xianliao_component:hover .chat .chat-content {*/
/*background:rgba(255,255,255,0.9);*/
/*box-shadow:none;*/
/*}*/

.chat-content__ads{
    margin:-1px 0 -1px 0;
}


.chat-content__ads a{
    width: 100%;
}

.chat__ads_container{
    position: fixed;
    top: 80px;
    background: white;
    z-index: 5;
    opacity: 1;
}

.chat-content__ads img{
    width: 100%;
}

.chat-avatar-pm:hover {
    opacity: 1;
}

.chat-name {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    max-width: 170px;
    margin-right: 5px;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
}

.chat-name-reply {
    cursor:pointer;
    transition: all 0.3s ease;
}

/*.chat-name-reply:hover {*/
/*background:#eee;*/
/*border-radius:5px*/
/*}*/

.chat-name.chat_vip{
    font-weight:800;
}

/*.chat-name:after {*/
/*content: '';*/
/*background-color: rgb(255,122,95);*/
/*width:100%;*/
/*height:2px;*/
/*bottom:0px;*/
/*position:absolute;*/
/*}*/

.chat-message_right .chat-name {
    text-align:right;
}

.chat-inline-actions{
    margin: 0 10px 0 10px;
}

.chat-reaction{
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    color: #999
}

.chat-reaction-dot{
    margin-left: 5px;
    font-size: 10px;
    color: #999;
}

.chat-reply{
    cursor: pointer;
    margin: 0 0 0 5px;
    padding-top: 3px;
    color: #999;
}

.chat-badge {
    margin: 0px 4px 0px 0px;
    font-size: 10px;
    line-height: 12px;
    vertical-align: middle;
    padding: 1px 4px;
    cursor: default;
    display: inline-block;
    position: relative;
    /*background: #eee;*/
}
.chat-badge i {
    font-size:10px;
}

.chat__badge {
    position:relative;
    font-size: 14px !important;
    margin-right:3px;
}

.chat__badge.level.lv_0{
    color:#d0ae6e;
}

.chat__badge.level.lv_1 {
    color:#db9e8a;
}

.chat__badge.level.lv_2 {
    color:#58b205;
}

.chat__badge.level.lv_3 {
    color:#20baa9;
}

.chat__badge.level.lv_4 {
    color:#239eff;
}

.chat__badge.level.lv_5 {
    color:#1778ff;
}

.chat__badge.level.lv_6 {
    color:#1a33ff;
}

.chat__badge.level.lv_7 {
    color:#7926ff;
}

.chat__badge.level.lv_8 {
    color:#dc09ff;
}

.chat__badge.level.lv_9 {
    color:#ff8e00;
}

.chat__badge.level.lv_10 {
    color:#f35470;
}

.chat__badge.sofa {
    background-position: 625px 659px;
    width: 20px;
    text-align: center;
    padding-right: 5px;
    height: 20px;
    color: white;
    font-weight: 800;
    display: inline-block;
}

.chat__badge.ex-1 {
    background-position: 559px 559px;
    width: 20px;
    text-align: center;
    height: 20px;
    color: white;
    font-weight: 800;
    display: inline-block;
}

.chat__badge.visitor {
    background-position: 595px 526px;
    width: 24px;
    text-align: center;
    height: 20px;
    color: white;
    font-weight: 800;
    display: inline-block;
}

.chat__badge_admin {
    color:#4ca3ff;
}
.chat__badge_superadmin {
    color:#ff4c4c;
}
.chat__badge_visitor {
    color: #65b139;
}

.chat-badge__reply {
    font-size: 12px;
    padding: 4px;
    cursor: pointer;
    border-radius: 7px;
    border: 1px solid white;
}

.chat-badge__reply:hover {
    background:rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}


.chat-badge_pm {
    background:rgba(255,255,255,0.1);
    font-size: 12px;
    line-height: 15px;
    margin-top: 2px;

}

.chat-badge-bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    opacity: 0.1;
}
.chat-badge__tooltip {
    position: absolute;
    top: -8px;
    left: -102px;
    right: -100px;
    transform: translate3d(0px,-100%,0px);
    font-size: 12px;
    color: initial;
    font-weight: initial;
    z-index: 10;
    display: none;
}

.chat-badge__tooltip.reversed {
    transform: translate3d(0px, 100%,0px);
    bottom: -8px;
    top: auto;
}

.chat__badge:hover .chat-badge__tooltip {
    display:flex;
    align-items:center;
    justify-content:center;
    animation-name: chat-badge__tooltip_hover;
    animation-duration: 0.2s;
}

.chat__badge:hover .chat-badge__tooltip.reversed {
    animation-name: chat-badge__tooltip_reversed_hover;
}

@keyframes chat-badge__tooltip_hover {
    0%   {
        transform:translate3d(0, -90%, 0);
        opacity:0
    }
    100% {
        transform:translate3d(0, -100%, 0);
        opacity:1
    }
}

@keyframes chat-badge__tooltip_reversed_hover {
    0%   {
        transform:translate3d(0, 90%, 0);
        opacity:0
    }
    100% {
        transform:translate3d(0, 100%, 0);
        opacity:1
    }
}

.chat-badge__tooltip-inner {
    padding:7px 10px;
    background: white;
}

.chat-badge__tooltip-how {
    border-top: 1px dashed #ddd;
    color: #666;
    font-size: 11px;
    line-height: 13px;
    padding-top: 7px;
}

.chat-badge__tooltip:before,.chat-badge__tooltip:after {
    content: "";
    width: 10px;
    height: 10px;
    background: white;
    position: absolute;
    bottom: -5px;
    transform: rotate(45deg);
}

.chat-badge__tooltip.reversed:before,.chat-badge__tooltip.reversed:after {
    content: "";
    width: 10px;
    height: 10px;
    background: white;
    position: absolute;
    top: -5px;
    transform: rotate(45deg);
}

.chat-badge__tooltip:before {
    z-index:-1;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}

.chat-badge-room {
    padding: 2px 15px;
    margin-bottom: 3px;
    font-size: 12px;
    line-height: 16px;
    max-width:200px;
    height: auto;
    overflow: hidden;
    background: white;
}

.chat-badge-room:hover {
    background:#eee !important;
}

/*.chat-control {*/
/*position:absolute;*/
/*right:5px;*/
/*top:calc(50% - 16px);*/
/*opacity:0;*/
/*transition: opacity 0.3s ease;*/
/*}*/



/*.chat-message:hover .chat-control {*/
/*opacity:1;*/
/*}*/

/*.chat-control__tooltip {*/
/*position: absolute;*/
/*color: initial;*/
/*text-align:left;*/
/*top: -5px;*/
/*right: -5px;*/
/*padding: 10px 50px 10px 10px;*/
/*font-size: 12px;*/
/*font-weight: initial;*/
/*background: white;*/
/*display:none;*/
/*}*/

/*.chat-control:hover .chat-control__tooltip {*/
/*display:flex;*/
/*animation: chat-control__tooltip_hover;*/
/*animation-duration: 0.2s;*/
/*}*/

/*@keyframes chat-control__tooltip_hover {*/
/*0%   {*/
/*transform:translate3d(10px, 0, 0);*/
/*opacity:0*/
/*}*/
/*100% {*/
/*transform:translate3d(0, 0, 0);*/
/*opacity:1*/
/*}*/
/*}*/

/*.chat-control__tooltip div {*/
/*width:42px;*/
/*font-size:11px;*/
/*text-align:center;*/
/*}*/
/*.chat-control-item:hover {*/
/*background-color: rgba(158,158,158,.2);*/
/*cursor: pointer;*/
/*opacity:1;*/
/*}*/
/*.chat-control__tooltip i {*/
/*margin-right:3px;*/
/*font-size:10px;*/
/*}*/

.chat-img-container {

}

.chat-img {
    height: 100px;
    max-width: 100%;
    border-radius: 2px;
    background-color: white;

}

.chat-gif {
    height: 100px;
    max-width: 100%;
    border-radius: 2px;
    background-color: white;

}

.chat-img-zoom {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
    text-align:center;
    line-height:100px;
    color:white;
    opacity:0;
    transition: all 0.1s ease;
}

.chat-img-container:hover .chat-img-zoom {
    opacity:1;
}

.chat-time {
    font-size: 11px;
    margin-left: 5px;
    cursor:default;
    /* Copied from below */
    display: inline-block;
    white-space: nowrap;
    vertical-align: baseline;
}

.chat-message:nth-last-child(8n-7) .chat-time {
    /* Nothing */

}

/* ==============================
   2.4 Compose
  ============================== */

.compose {
    position:relative;
    padding: 5px 7px;
    bottom: 0;
    right: 0;
    display: flex;
    /*margin-top:15px;*/
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:100%;
    border-top:1px solid rgba(0,0,0,0.1);
}

/**/

.compose-attachments {
    padding: 5px 5px 0 5px;
    margin-bottom: -5px;
}

.compose-attachments img {
    width: 100%;
    float: left
}

.compose-textarea-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    margin:2px;

}

.compose-textarea {
    width:calc(100% - 12px);
    background:none;
    -webkit-appearance: none;
    resize: none;
    overflow: hidden;
    border: none;
    padding:6px;
    line-height: 15px;
    font-size: 14px;
    outline: none;
    border-bottom: 1px solid #9a9a9a;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
}

.m .compose-textarea {
    width: 100%;
    font-size: 16px;
}

.compose-textarea-container:hover .mdl-button_underscore,
.compose-textarea-container:focus .mdl-button_underscore,
.popup__search_bar:hover .mdl-button_underscore,
.popup__search_bar:focus .mdl-button_underscore
{
    transform: scale(1);
}


.emoji-nav {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #eee;
}
.emoji-nav .mdl-button {
    width:33.33%;
}
/*.yan-container,.sticker-container {*/
/*margin-top: 36px;*/
/*overflow: auto;*/
/*}*/
.emoji-container {
    position:absolute;
    top:0;
    bottom: 61px;
    left:0;
    right:0;
    overflow-x:hidden;
    overflow-y: auto;
}
.gif-container {
    position:absolute;
    top:0;
    bottom: 31px;
    left:0;
    right:0;
    overflow-x:hidden;
    overflow-y: auto;
}
.gif-container img {
    width: calc(25% - 2px);
    margin: 1px;
    height: 65px;
    cursor: pointer;
}

.gif-recent-empty {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background:#eee;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.gif-recent-empty img {
    opacity:0.3;
    cursor:default;
}
.gif-recent-empty p{
    font-size:14px;
    opacity:0.5;
}

.gif-container-weshinelogo {
    position: absolute;
    top: 0;
    bottom: 31px;
    left: 0;
    right: 0;
    z-index: -1;
    background-image: url(https://www.weshineapp.com/_nuxt/img/logo.a243854.png);
    background-size: initial;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size:120px;
    opacity: 0.1;
    animation: weshinelogoblink 0.3s linear infinite;
}
@keyframes weshinelogoblink {
    0% {opacity: 0.1;}
    50% {opacity: 0.2;}
    100% {opacity: 0.1;}
}
.gif-nav-secondary {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.emoji-nav-bottom {
    position: absolute;
    border-top: 1px solid #eee;
    bottom: 31px;
    width: 100%;
    left: 0;
    background: white;
    max-height: 31px;
    display:flex;
}
.emoji-nav-bottom .mdl-button {
    min-width: 0;
    padding: 0;
    flex: 1;
    width: 16.6666666%;
    font-size:12px;
}

._emoji {
    margin: 2px;
    display: inline-block;
    font-size: 25px;
    line-height: 33px;
    width: 37px;
    height: 37px;
    text-align: center;
    cursor: pointer;
    border: 1px solid white;
}

._yan {
    display: block;
    float: left;
    font-size: 12px;
    line-height: 37px;
    text-align: center;
    width: calc(33% + 1px);
    height: 36px;
    cursor: pointer;
    margin-left: -1px;
    margin-bottom: -1px;
}



.chat-at {
    padding: 4px 10px 4px 10px;
    margin: 5px 5px 5px 0;
    font-size: 12px;
    border-radius: 11px;
    border: 1px solid;
    display: inline-block;
    line-height: 1;
    cursor: default;
}





.compose-sticker-container {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    position: absolute;
    overflow: visible;
    height: 0;
    width: 0;
    visibility: hidden;
    z-index: -1;

}
.compose-sticker-container.is-visible {
    z-index: 999;
    visibility: visible;
    left: 10px;
    bottom: 40px;
    width: 280px;
    height: 275px;
}


.compose-sticker-container-inner {
    position: absolute;
    list-style: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    opacity: 0;
    clip: rect(280px, 0px, 275px, 0px);
    z-index: -1;
    transition: opacity .2s cubic-bezier(.4,0,.2,1),clip .3s cubic-bezier(.4,0,.2,1);
}

.compose-sticker-container__outline {
    display: block;
    background: #fff;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    will-change: transform;
    transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);
    transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1);
    z-index: -1;
}

.compose-sticker-container.is-visible .compose-sticker-container__outline {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    z-index: 999;
    width: 280px;
    height: 275px;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.compose-sticker-container.is-visible .compose-sticker-container-inner {
    opacity: 1;
    z-index: 999;
    clip: rect(0px, 280px, 275px, 0px);

}


.compose-upload-container {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    position: absolute;
    overflow: visible;
    height: 0;
    width: 0;
    visibility: hidden;
    z-index: -1;
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
}

.compose-upload-container.is-visible {
    z-index: 999;
    visibility: visible;
    right: 10px;
    bottom: 40px;
    width: 280px;
    height: 100px;
}

.compose-upload-container__outline {
    display: block;
    background: #fff;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    will-change: transform;
    transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);
    transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1);
    z-index: -1;
}

.compose-upload-container.is-visible .compose-upload-container__outline {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    z-index: 999;
    width: 280px;
    height: 100px;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}


.compose-upload-container-inner {
    position: absolute;
    list-style: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    opacity: 0;
    clip: rect(100px, 280px, 100px, 280px);
    z-index: -1;
    transition: opacity .2s cubic-bezier(.4,0,.2,1),clip .3s cubic-bezier(.4,0,.2,1);
}


.compose-upload-container.is-visible .compose-upload-container-inner {
    opacity: 1;
    z-index: 999;
    clip: rect(0px, 280px, 100px, 0px);

}

.compose-upload-container .progress {
    left: 3px;
    right: 3px;
    bottom: 3px;
    top: 3px;
    position: absolute;
    height: auto;
    width: auto;
    opacity: 0.2;
}


.compose-upload-container .progress .indeterminate:before {
    top:auto;
    right:0;
    -webkit-animation: indeterminate-vertical 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
    infinite;
    animation: indeterminate-vertical 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.compose-upload-container .progress .indeterminate:after {
    top:auto;
    right:0;
    -webkit-animation: indeterminate-vertical-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
    infinite;
    animation: indeterminate-vertical-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
    infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}

@-webkit-keyframes indeterminate-vertical {
    0% {
        bottom: -35%;
        top: 100%;
    }
    60% {
        bottom: 100%;
        top: -90%;
    }
    100% {
        bottom: 100%;
        top: -90%;
    }
}
@keyframes indeterminate-vertical {
    0% {
        bottom: -35%;
        top: 100%;
    }
    60% {
        bottom: 100%;
        top: -90%;
    }
    100% {
        bottom: 100%;
        top: -90%;
    }
}
@-webkit-keyframes indeterminate-vertical-short {
    0% {
        bottom: -200%;
        top: 100%;
    }
    60% {
        bottom: 107%;
        top: -8%;
    }
    100% {
        bottom: 107%;
        top: -8%;
    }
}
@keyframes indeterminate-vertical-short {
    0% {
        bottom: -200%;
        top: 100%;
    }
    60% {
        bottom: 107%;
        top: -8%;
    }
    100% {
        bottom: 107%;
        top: -8%;
    }
}

.filelist-item-container {
    width: 100%;
    position: relative;
    background: white;
    transition:opacity 0.3s ease;
}

.filelist-item-container {
    overflow:hidden;
}

.filelist-item-upload-list {
    width: 100%;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    box-sizing: border-box;
    justify-items:flex-end;
}

.filelist-item-upload {
    display: flex;
    position: relative;
    /* -webkit-flex-shrink: 0; */
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 94px;
    margin: 3px 3px 3px 0px;
    /* border:1px solid #eee; */
}

.filelist-item {
    width: 100px;
    height: 100px;
    margin: 10px;
    float: left;
    position: relative;
    cursor: pointer;
}

.filelist-item-s {
    width: calc(25% - 10px);
    height: 62px;
    margin: 5px;
    background: #ddd;
    float: left;
    position: relative;
    cursor: pointer;
    overflow:hidden;
}

.compose-sticker-container .filelist-image {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: none;
}

.compose-upload-container .filelist-image {
    height: 94PX;
}

.filelist-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    color:white;
    cursor:pointer;
    text-shadow: 0px 0px 10px black;
    transition: all 0.2s ease;
}

.filelist-remove-s {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    color:white;
    text-shadow: 0px 0px 20px black;
    transition: all 0.2s ease;
}

.filelist-remove:hover,
.filelist-remove-s:hover {
    opacity: 1
}
.filelist-emoji-empty {
    background: url(https://s3.cn-north-1.amazonaws.com.cn/xianliaom/images/d80683de-8660-4758-8949-baf15c4a03f4.png) no-repeat 90% 10%;
    background-size: 40%;
    animation: ghost 2s;
}
/*#compose-emoji {*/
/*position: absolute;*/
/*left: 7px;*/
/*top: 7px;*/
/*}*/

/*#compose-pic {*/
/*position: absolute;*/
/*left: 47px;*/
/*top: 7px;*/
/*}*/

.emoji-edit-container {
    width: 100%;
    position: relative;
    float: left;
    text-align: center;
}

.compose-dropzone-container-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/*.compose-upload-container .compose-dropzone-container {*/
    /*transition: all 0.2s ease;*/
/*}*/

.compose-dropzone-container {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 80px;
}

.compose-dropzone-container:hover i {
    animation: dropzoneiconshake 0.5s linear infinite;
}
@keyframes dropzoneiconshake {
    0% {transform:translate3d(0,0,0);}
    50% {transform:translate3d(0,-5px,0);}
    100% {transform:translate3d(0,0,0);}
}
.compose-upload-container ._tab {
    position: relative;
    width: 100%;
    height: 100px;
}

.compose-upload-container .compose-dropzone-bg {
    text-align: center;
    position: absolute;
    left: 3px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    top: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px dashed;
}

.compose-upload-container .compose-dropzone {
    width: 100%;
    height: 100px;
    float: left;
    position: relative;
    cursor: pointer;
}

.compose-sticker-container .compose-dropzone-container-inner {
    width: 88px;
    height: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.compose-sticker-container .compose-dropzone {
    width:88px;
    height:30px;
}

.compose-dropzone-loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}



/*.compose-dropzone-loading {*/
/*width: 14px;*/
/*height: 14px;*/
/*position: absolute;*/
/*top: 10px;*/
/*left: calc(50% - 80px);*/
/*font-size: 10px;*/
/*border-top: 1px solid rgba(0, 0, 0, 0.08);*/
/*border-right: 1px solid;*/
/*border-bottom: 1px solid rgba(0, 0, 0, 0.08);*/
/*border-left: 1px solid;*/
/*-webkit-border-radius: 50%;*/
/*-moz-border-radius: 50%;*/
/*border-radius: 50%;*/
/*-webkit-animation: spinner 700ms infinite linear;*/
/*-moz-animation: spinner 700ms infinite linear;*/
/*animation: spinner 700ms infinite linear;*/
/*}*/

.compose-control-container {
    z-index:1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*min-height: 38px;*/
    flex:1;
}




/*.m .compose-button-container {*/
/*height: 45px;*/
/*}*/

.compose-button {
    height: auto;
    position: relative;
    padding: 3px 15px;
    font-size: 14px;
    line-height: 24px;
    color: white;
    float: left;
    cursor: pointer;
    -webkit-transition: all 100ms cubic-bezier(0.5, 0, 0.5, 1);
    -moz-transition: all 100ms cubic-bezier(0.5, 0, 0.5, 1);
    transition: all 100ms cubic-bezier(0.5, 0, 0.5, 1);
}

.m .compose-button {
    padding: 10.5px 20px;
    font-size: 18px;
}

.compose-button text {
    padding-left: 5px;
    font-size: 13px;
}

.m .compose-button text {
    font-size: 16px;
}


/* ==============================
   2.5 Online-user
  ============================== */

.pill-container {
    background: white;
    position: relative;
    display: block;
    float: left;
}

.compose__pill {
    padding: 0 22px 0 5px;
    margin-top: -2px;
    margin-left:4px;
    font-size: 12px;
    display: block;
    float: left;
    position: relative;
    border-radius: 11px;
    cursor: initial;
    border: 1px solid;
}

.chat-pill-close {
    font-size: 20px;
    border-radius: 100%;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
}
.mdl-chip {
    font-size: 11px;
    vertical-align: middle;
    height: 24px;
    line-height: 20px;
    display: inline-block;
    border:1px solid;
}
.mdl-chip__action {
    width:16px;
}
.mdl-chip i{
    font-size:16px;
}
.chat-online {
    border-radius: 0 0 15px 15px;
    padding: 2px 10px;
    font-size: 12px;
    position: absolute;
    top: 80px;
    left: calc(50% - 41px);
    z-index: 10;
    background: white;
    transition: opacity 0.3s ease;

}


/* ==============================
   2.6 small popup
  ============================== */

.popup-card {
    padding: 20px;
    height: 100%;
    width: 100%;
    z-index:10;
    position: absolute;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    animation: popup-card_popup 0.2s;
}

@-webkit-keyframes popup-card_popup {
    0% {
        transform: translateY(100px);
        opacity:0;
    }
    100% {
        transform: translateY(0px);
        opacity:1;

    }
}



.popup-card__bg {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: rgba(0,0,0,0);
}

.popup-card__close {
    position: absolute;
    right: 7px;
    top: 7px;
}

.popup-card__pm-confirm {
    flex:1;
    position:relative;
    background: white;
    width: 100%;
}

.popup-card__pm-confirm__profile {
    padding: 12px 12px 12px 12px;
    display: -webkit-flex;
    display: flex;
    text-align: center;
    align-items: center;
    height: auto;
    flex-direction: column;
    text-transform: initial;
    width: 100%;
}

.popup-card__pm-confirm__avatar{
    width: 80px;
    height: 80px;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 6px;
}

.popup-card__pm-confirm__name {
    flex: 1;
    line-height: 20px;
    margin: 10px;
    font-size: 16px;
    overflow: hidden;
}

.popup__search_container {
    width: calc(100% - 10px);
    background: #eee;
    margin: 10px 5px;
    padding: 0px 12px;
    border-radius: 22px;
    position: relative;
}

.popup__search_bar{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.popup__search_bar input{
    flex:1;
    background:none;
    -webkit-appearance: none;
    resize: none;
    overflow: hidden;
    border: none;
    padding:6px;
    line-height: 22px;
    font-size: 14px;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
}
/* ==============================
   2.6 menu
  ============================== */

.popup-container.show {
    visibility: visible;
    opacity: 1;
    transform: translate3d(-100%, 0, 0);
}

.popup-container.hide {
    opacity: 0;
    visibility: hidden;
}

.popup-container {
    position: absolute;
    transform: translate3d(5px, 0, 0);
    top: 0;
    bottom: 0;
    width: 100%;
    right: -100%;
    z-index:1;
    background: white;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}

.popup-container_flex {

}

.popup-container_onboarding {
    background:none;
    display:flex;
    padding:80px 30px;
}

.popup-container__visitor_login {
    background: rgba(0,0,0,0);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    z-index: 15;
    justify-content: center;
    padding: 40px 20px;
}

/*.xianliao_component:hover .popup-container__visitor_login {*/
/*background: rgba(0,0,0,0.2);*/
/*}*/

.popup-body {
    /*position: absolute;*/
    /*top: 46px;*/
    /*left: 0;*/
    /*padding: 10px;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*background: rgba(240, 240, 240, 1);*/
    max-height: 65vh;
    overflow-y: auto;
}

.popup-body-mobile{
    overflow-y: auto;
}

.popup-body__flex-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.popup-body__flex-card div:nth-child(1) {
    flex:2;
}

.popup-body__flex-card div:nth-child(2) {
    flex:1;
}

.popup-body__flex-container{
    display: flex;
    -webkit-flex: 1 1 auto;
    flex-direction: column;
    overflow-y: auto;
    margin-top: 47px;
    padding: 0px 20px;
}

.popup-body__admin-color input {
    width: 70px;
    height: 50px;
    text-align: center;
    border: none;
    cursor:pointer;
}

.admin_color__popover {
    right:0px;
}

.popup-body .mdl-radio__label {
    font-size: 13px;
}

.popup-body table {
    border:none;
    margin:0px;
    width: 100%;
}

.popup-body-mobile table{
    border:none;
    margin:0px;
    width: 100%;
}

.popup-body table tr td {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

.poppup-body table tr td{
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

.popup-auth-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    max-width: 100%;
}

.popup-auth-selector {
    margin-left: auto;
    margin-right: auto;
    width: 112px;
    margin-bottom: 30px;
}

.btn-auth-selector {
    padding: 0 3px 5px 3px;
    font-weight: 600;
    font-size: 15px;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 2px solid transparent;
}

.btn-auth-selector.active {
    border-bottom: 2px solid;
}

.popup-input {
    width: 100%;
    font-size: 14px;
    margin-top: 10px;
    background: #eee;
    border: 1px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    padding: 10px 15px;
}

.input-mobile-height {
    width: 30px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
}


/* ==============================
   2.7 Notification
  ============================== */

@keyframes notificationShow {
    0% {
    }
    100% {
        transform: translate3d( 0, 100px, 0);
    }
}

@-moz-keyframes notificationShow {
    0% {
    }
    100% {
        transform: translate3d( 0, 100px, 0);
    }
}

@-webkit-keyframes notificationShow {
    0% {
    }
    100% {
        transform: translate3d( 0, 100px, 0);
    }
}

@keyframes notificationHide {
    0% {
        transform: translate3d( 0, 100px, 0);
    }
    100% {
    }
}

@-moz-keyframes notificationHide {
    0% {
        transform: translate3d( 0, 100px, 0);
    }
    100% {
    }
}

@-webkit-keyframes notificationHide {
    0% {
        transform: translate3d( 0, 100px, 0);
    }
    100% {
    }
}

.notification {
    position: absolute;
    top: -90px;
    left: 10px;
    right: 10px;
    text-align: center;
    z-index: 100;
    padding: 14px;
    background: white;
    font-weight: 600;
    cursor:pointer;
    transition:all 0.3s ease;
}

.notification.show {
    visibility: visible;
    transform: translate3d( 0, 100px, 0);
}

.notification.hide {
    visibility: hidden;
}

.notification.info {
    color: #80c9f3;
}

.notification.success {
    color: #80f380;
}

.notification.alert {
    color: #f3b080;
}

.notification.warning {
    color: #ff6565;
}

/* ==============================
   2.8 dock
  ============================== */


.dock {
    position: fixed;
    width: 62px;
    right: 5px;
    top: 50%;
    margin-top: -185px;
    transform: translate3d(0px, 0, 0);
    -webkit-transition: all 800ms ease;
    -moz-transition: all 800ms ease;
    transition: all 800ms ease;
}

.m.dock {
    position: fixed;
    bottom: 0;
    right: 10px;
    top: auto;
    width: 90px;
    height: 90px;
    overflow: hidden;
    margin-bottom: 0;
    border-radius: 100px;
}

.m .dock-scroll {
    bottom: 0;
    left: 0;
    right: 0px;
    top: auto;
    padding-left: 14px;
    margin-right: -20px;
    padding-right: 20px;
    height: 90px;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
    border-radius: 100px;
}
.dock__container {
    display: flex;
    flex-direction: column;
    /*height: 370px;*/
}

.m .dock__container {
    display: flex;
    flex-direction: column;
    /*height: 450px;*/
}

/*.dock.hide {*/
/*transform: translate3d(-288px, 0, 0);*/
/*}*/

/*.dock.show {*/
/*transform: translate3d(0, 0, 0);*/
/*}*/

.dock__item {
    width: 62px;
    position: relative;
    /* flex: 1; */
    margin-top: 10px;
    height: 64px;
}

.m .dock__item {
    height: 80px;
}

.dock__recent:nth-child(n+5) {
    display:none;

}

.dock__avatar-user {
    width: 40px;
    height: 40px;
    left: 11px;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 100%;
    vertical-align: top;
    display: inline-block;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.dock__item_bind {
    height:84px;
}
.dock__item_bind .dock__avatar-user {
    width: 60px;
    height: 60px;
    margin-left: -10px;
}

.dock__item_bind .dock__item-name{
    top: 52px;
}


.dock__avatar-visitor {
    width: 40px;
    height: 40px;
    left: 11px;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 100%;
    vertical-align: top;
    border: 6px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.85;
}

.dock__avatar-visitor i{
    display: flex;
    justify-content: center;
}

.dock__avatar-onboarding {
    animation: dockOnboardingBlink 1.8s infinite;
}
.dock__avatar-onboarding i {
    font-size:14px;
}

@keyframes dockOnboardingBlink {
    0% {
        opacity:0.5
    }
    50% {
        opacity:1
    }
    100% {
        opacity:0.5
    }
}@-moz-keyframes dockOnboardingBlink {
     0% {
         opacity:0.5
     }
     50% {
         opacity:1
     }
     100% {
         opacity:0.5
     }
 }-webkit-@keyframes dockOnboardingBlink {
              0% {
                  opacity:0.5
              }
              50% {
                  opacity:1
              }
              100% {
                  opacity:0.5
              }
          }


.m .dock__avatar-user,.m .dock__avatar-visitor {
    width: 50px;
    height: 50px;
    left: 6px;
}

.dock__avatar-visitor i {
    font-size: 38px;
}

.m .dock__avatar-visitor i {
    font-size: 38px;
}

.dock__unread-num {
    position: absolute;
    right: 3px;
    top: -2px;
    cursor: pointer;
}

.dock__unread-num__stack {
    position: absolute;
    right: 3px;
    top: -2px;
    cursor: pointer;
}

.dock__unread-num__stack .unread-num {
    position:relative;
    margin-bottom:3px;
}

@keyframes dock-active {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-moz-keyframes dock-active {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes dock-active {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.dock__unread-num_active {
    animation: dock-active 1.8s infinite;
    width: 12px;
    height: 12px;
    transform: translate3d(-3px,3px,0px);
}

.dock__item-name {
    line-height: 30px;
    text-align: center;
    width: 62px;
    padding: 2px 1px;
    top: 32px;
    left: 0px;
    position: absolute;
    word-break: break-all;
    max-height: 30px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
    overflow: hidden;
    cursor: pointer;
}

.m .dock__item-name {
    top: 42px;
}

.dock-bubble {
    margin: 10px;
    position: absolute;
    padding: 10px;
    left: 0;
    right: 0px;
    top: 0;
    background: white;
}



.dock-bubble__message {
    display:flex;
}

.dock-bubble-close {
    position: absolute;
    right: 0;
    top: 5px;
    font-size: 28px;
    line-height: 32px;
    padding: 0;
    height: 30px;
    width: 40px;
}


@media (max-width: 232px) {
    .dock-bubble {
        right: 0
    }

}

@media (min-width: 234px) {
    .dock-bubble {
        width: calc(100% - 20px);
    }

}

.m.dock .circle {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 0;
    left: 0;
}

.m.dock .circle-ripple {
    position: absolute;
    float: left;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-animation: ripple 2s linear infinite;
    -moz-animation: ripple 2s linear infinite;
    animation: ripple 2s linear infinite;
}

.m.dock .circle-ripple-2 {
    position: absolute;
    float: left;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-animation: ripple 2s linear 1s infinite;
    -moz-animation: ripple 2s linear 1s infinite;
    animation: ripple 2s linear 1s infinite;
}

.m .dock-chat {
    text-align: center;
    line-height: 26px !important;
    font-size: 28px !important;
}

.m .room-active {
    position: absolute;
    width: 20px;
    height: 15px;
    left: 5px;
    top: 5.5px;
    animation: room-active 1.8s infinite;
}

.m .room-active span:nth-last-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 9px;
    animation: dock-blink 0.9s 0.3s infinite;
}

.m .room-active span:nth-last-child(2) {
    position: absolute;
    top: 0;
    left: 6px;
    font-size: 9px;
    animation: dock-blink 0.9s 0.6s infinite;
}

.m .room-active span:nth-last-child(3) {
    position: absolute;
    top: 0;
    left: 12px;
    font-size: 9px;
    animation: dock-blink 0.9s 0.9s infinite;
}

.hangouts {
    /*position: fixed;*/
    /*width: 350px;*/
    /*right: -350px;*/
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    overflow: hidden;
    background: white;
    opacity: 1;
    border-left: 1px solid #ddd;
    -webkit-transition: all 800ms ease;
    -moz-transition: all 800ms ease;
    transition: all 800ms ease;
}

/*.hangouts.hide {*/
/*transform: translate3d(0, 0, 0);*/
/*}*/

/*.hangouts.show {*/
/*transform: translate3d(-100vw, 0, 0);*/
/*}*/
/*.hangouts.stay {*/
/*transform: translate3d(-100vw, 0, 0);*/
/*-webkit-transition: none;*/
/*-moz-transition: none;*/
/*transition: none;*/
/*}*/

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-button {
    width: 0;
    height: 0;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

::-webkit-scrollbar-thumb:active {
    background: #bbb;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0);
    border: 0 none #ffffff;
    border-radius: 0;
}

::-webkit-scrollbar-track:hover {
    background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-track:active {
    background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-corner {
    background: transparent;
}


.m.hangouts {
    position: fixed;
    width: 100%;
    right: -100%;
    top: 0;
    bottom: 0;
    overflow: hidden;
    background: white;
    opacity: 1;
    border-left: none;
}




/* ==============================
   2.9 im
  ============================== */
.im.show {
    transform: translate3d(0, 0, 0);
}

.im.hide {
    transform: translate3d(-100px, 0, 0);
}

.im {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:white;
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    transition: all 600ms ease;
}

.im__nav-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1;
    border-bottom: 1px solid #ddd;
    padding:5px;
}

.im__nav-top__title {
    left: 50px;
    right: 50px;
    position: absolute;
    height: 36px;
    font-size: 17px;
    color: white;
    font-weight: 500;
    text-align: center;
    line-height: 34px;
    letter-spacing: 1px;
    cursor: default;
}
.im__nav-body {
    position: absolute;
    top: 42px;
    bottom: 52px;
    width: 100%;
    right: -100%;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid #eee;
}

.im__nav-body.show {
    transform: translate3d(-100%, 0, 0);
}

.im__list-recent {
    padding: 7px 12px 12px 12px;
    text-align: left;
    height: auto;
    text-transform: initial;
    width: 100%;
    border-bottom: 1px solid #eee;
}

.im__list-recent__avatar-user {
    width: 40px;
    height: 40px;
    float:left;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 100%;
    margin-right: 5px;
    margin-top: 6px;
    vertical-align: top;
    display: inline-block;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.im__list-recent__chat-content {
    width: calc(100% - 50px);
    transform: translate3d(0px, 5px, 0px);
    line-height: 20px;
    padding-left: 7px;
    font-size: 12px;
    overflow: hidden;
}

.im__list-recent__chat-name {
    font-size: 13px;
    line-height: 18px;
    margin-top: 1px;
    margin-bottom: 2px;
    margin-right: 70px;
}

.im__list-recent__chat-text {
    color:#444;
}

.im__list-recent__least-time {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 11px;
    color: #bbb;
}

.im__list-recent__unread-num {
    position: absolute;
    right: calc(100% - 56px);
    top: 10px;
}

@keyframes dock-active {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-moz-keyframes dock-active {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes dock-active {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.im__list-recent__unread-num_active {
    animation: dock-active 1.8s infinite;
    width: 12px;
    height: 12px;
    transform: translate3d(-3px,3px,0px);
}

.im__list-settings {
    padding: 12px;
    text-align: left;
    height: auto;
    text-transform: initial;
    width: 100%;
    border-bottom: 1px solid #eee;
}

.im__divider {
    border-bottom: 1px solid #eee;
    height:20px;
}

.im__contacts-empty {
    padding: 30px 0px;
    text-align: center;
}

.im__profile {
    padding: 10px;
    display: -webkit-flex;
    display: flex;
    text-align: center;
    height: auto;
    flex-direction: column;
    text-transform: initial;
    width: 100%;
    border-bottom: 1px solid #eee;
}

.im__progress__badge {
    position: relative;
    font-weight: 600;
    padding: 3px 8px;
    font-size: 11px;
    cursor: default;
    display: inline-block;
    line-height: 15px;
}

.im__progress__text {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom:5px;
    line-height:15px;
}

.im__progress {
    position:relative;
    height:2px;
}

.im__progress_inner {
    position:absolute;
    height:2px;
}

.im__profile__avatar {
    width: 80px;
    height: 80px;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 100%;
    margin-right: auto;
    margin-left: auto;
}

.im__profile__name {
    flex: 1;
    line-height: 20px;
    margin: 10px;
    font-size: 16px;
    overflow: hidden;
}

.im__nav-bottom {
    border-top:1px solid #ddd;
    position:absolute;
    bottom:0;
    width:100%;
    display:flex;
}

.im__nav-bottom__button {
    flex:1;
    height:auto;
}
.im__nav-bottom__button_active,.im__nav-bottom__button_active:hover,.im__nav-bottom__button_active:active {
    background-color: rgba(0,0,0,0.15);
    cursor:initial;
}
.im__nav-bottom__button p {
    margin-top: -9px;
    font-size: 11px;
    font-family: microsoft yahei, arial, sans-serif;
}


/* ==============================
   2.10 Settings
  ============================== */

.room-settings__avatar__container{
    margin-right: 10px;
    width:40px;
    height: 40px;
    position: relative;
}

.room-settings__avatar{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    display: inline-block;
}

.room-settings__avatar__uploader{
    width: 40px;
    height: 40px;
}

.room-settings__avatar__preview{
    width: 140px;
    height: 140px;
    border-radius: 100%;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    display: inline-block;
}

.room-settings__avatar__upload-btn{
    position: absolute;
    display:inline-block;
    top:10px;
    left: 10px;
}

.room-settings__avatar__dropzone {
    width: 56px;
    height: 56px;
    position: absolute;
    top: 110px;
    margin-left: 20px;
    left: 50%;
    cursor:pointer;
}

.room-settings__room-name{
    max-width: 75%;
}

.room-settings__room-list {
    padding:0;
}

.room-settings__room-list li{
    border-top: 1px solid rgba(0,0,0,.12);
}

.room-settings__room-list_editing {
    display:flex;
    flex-direction:column;
}

.room-settings__room-list_viewing {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.general_setting__textfield{
    width: 100px;
    text-align: right;
}

.general_setting__input{
    font-size: 14px;
    text-align: right;
}

.general_setting__label{
    font-size: 14px;
    text-align: right;
}

.private_rooms__avatar {
    height: 40px;
    width: 40px;
    background: white 50%;
    border-radius: 100%;
    background-size: cover;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    display: inline-block;
}

.private_message__indicator{
    height: 20px;
    width: 20px;
    margin-top: 5px;
    background: white 50%;
    border-radius: 100%;
    margin-right: 2px;
    background-size: cover;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    display: inline-block;
    animation: dock-active 1.8s infinite;
}
/* ==============================
   2.11 Earnings
  ============================== */
.earning__zhifubao {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin: 10px;
}

.earning__stats {
    display:flex;
    padding: 15px 0;
}
.earning__stats__item {
    text-align:center;
    border-right:1px solid #eee;
    margin-right:-1px;
    padding: 0px 10px;
    flex:1
}
.earning__stats__item h3 {
    font-weight:100;
    font-size:24px;
}
.earning__stats__item h6 {
    font-weight:400;
    font-size:12px;
}

.earning__history {
    display:flex;
    flex-direction:row;
    align-items:flex-end;
    text-align: center;
}
.earning__history__bar {
    width:10px;
    height:200px;
    background:green;
    margin-left:10px;
}
.earning__available {
    padding: 10px 20px 30px;
    text-align: left;
    height: auto;
    text-transform: initial;
    width: 100%;
    border-bottom: 1px solid #eee;
    display: flex;
    font-size: 32px;
    font-weight: 100;
    justify-content: space-between;
    align-items: center;
}

.earnings__table{
    width: 100%;
}
.earning__payment {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    padding: 10px;
    z-index: 1;
}

.earning__payment-update__menu button {
    width:50%;
    border-bottom:1px solid #eee;
}

.earning__payment-update__controls{
    display: flex;
    justify-content: center;
}

.earning__payment-update__container{
    height: 280px;
}

.earning__QR__uploader{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.earning__QR__container{
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    border-radius: 20px;
    margin: 20px auto;
    position: relative;
}
.earning__QR{
    width: 198px;
    height: 198px;
    border-radius: 20px;
}
.earning__no-QR{
    width: 198px;
    height: 198px;
    border-radius: 20px;
    text-align: center;
}

.earning__no-QR h4{
    line-height: 200px;
}

.earning__QR__spinner{
    position: absolute;
    left: 80px;
    top: 80px;
    z-index: -10;
}

/* ==============================
   2.12 Onboarding
  ============================== */
.onboarding__container {
    flex:1;
    display:flex;
    flex-direction:column;
}

.onboarding__container > div{
    flex: 1 1 auto;
    margin: 5px;
}

.onboarding__slider{
    height: 100%;
    background: white;
}

.onboarding__confirm {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.onboarding__confirm button{
    margin: 15px 0px 10px 5px
}

.onboarding__panel{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding-bottom: 20px;
}

.onboarding__panel_text{
    flex: 1;
}

.onboarding__panel_img{
    flex:1;
    display: flex;
    align-items: center;
    justify-content:center;
    margin: 20px;
}
.onboarding__panel_img img{
    max-width: 100px;
    max-height: 100px;
}

/* ==============================
   2.13 Visitor
  ============================== */
.visitor_login__container{
    flex:1;
    display:block;
    position:relative;
    background: white;
    padding: 30px 15px 0px 15px;
    /*opacity: 0;*/
    transition: all 0.3s ease;
    /*transform:translate3d(100%,0px,0px);*/
}

/*.xianliao_component:hover .visitor_login__container {*/
/*opacity:1;*/
/*transform:translate3d(0px,0px,0px);*/
/*}*/

.visitor_login__close_button {
    position:absolute;
    top:7px;
    right:7px;
}

.visitor_login__client_logo{
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height:100px;
    max-width: 100px;

}

.visitor_login__client_logo img{
    height: 100%;
    width: auto;
}

.visitor_login__form_group{
    flex:1;
    width: 95%;
}

.visitor_login__form__container{
    flex: 4;
    width: 100%;
}

.visitor_login__form p{
    text-align: center;
}

.visitor_login__submit_button{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
}

.visitor_login__footer p{
    bottom: 0px;
    line-height: 130%;
    font-size: 0.7rem;
}

.visitor_login__secondary_button{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top:30px;
}

.visitor_login__chat{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.visitor_login__phone_number{
    margin-bottom: 40px;
}

.visitor_settings__container{
    background: white;
    z-index: 1;
}

.visitor_settings__title{
    text-align: center;
}


.visitor_settings__form_container{
    padding: 10px 30px;
}

.visitor_settings__button{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 10px 0px;
}

/* ==============================
   2.14 FilePicker
  ============================== */

.filepicker__uploader{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.filepicker__avatar__container{
    width: 50px;
    height: 50px;
    margin: 10px 0;
    position: relative;
    float: right;
}

.filepicker__avatar__image{
    width: 50px;
    height: 50px;
    background-size: cover;
    background-position: 50% 50%;
}

.filepicker__avatar__bg {
    width: 50px;
    height: 50px;
    min-width:0;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    background-size: cover;
    background-position: 50%;
}

.filepicker__avatar__bg_2 {
    width: 50px;
    height: 50px;
    min-width:0;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    background:rgba(0,0,0,0.3);
    color:white;
    opacity:0;
    transition: all 0.1s ease;
}


.filepicker__avatar__container:hover .filepicker__avatar__bg_2 {
    opacity:1;
}

.filepicker__avatar__spinner{
    position: absolute;
    left: 11px;
    top: 11px;
    z-index: -10;
}

.filepicker__avatar__dropzone {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    opacity:0;

}

.filepicker__avatar__dropzone:hover {
    opacity:1;
}

.filepicker__website_logo__container{
    height: 130px;
    width: 280px;
    margin: 20px auto;
    position: relative;
}

.filepicker__website_logo{
    width: auto;
    height: 120px;
    max-width: 280px;
    display: block;
    margin: auto;
}

.filepicker__website_logo img{
    width: auto;
    height: 100%;

}

.filepicker__website__no-logo{
    width: auto;
    height: 100%;
    text-align: center;
}

.filepicker__website__no-logo h4{
    line-height: 130px;
}

.filepicker__website_logo__spinner{
    position: absolute;
    left: 130px;
    top: 50px;
    z-index: -10;
}

.filepicker__website_logo__dropzone {
    width: 56px;
    height: 56px;
    position: absolute;
    top: 80px;
    margin-left: 20px;
    left: 70%;
    cursor:pointer;
}

.filepicker__QR__container{
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    border-radius: 20px;
    margin: 20px auto;
    position: relative;
}
.filepicker__QR{
    width: 198px;
    height: 198px;
    border-radius: 20px;
}

.filepicker__no-QR{
    width: 198px;
    height: 198px;
    border-radius: 20px;
    text-align: center;
}

.filepicker__no-QR h4{
    line-height: 200px;
}

.filepicker__QR__spinner{
    position: absolute;
    left: 80px;
    top: 80px;
    z-index: -10;
}

.filepicker__announcement__spinner{
    position: fixed;
    left: 180px;
    top: 200px;
}
/* ==============================
   2.15 Settings Popup
  ============================== */
.settings_popup__container{
    position: absolute;
    width: 100%;
    height: 100%;
}

.settings_popup{
    /*position: absolute;*/
    /*top: 10%;*/
    /*left: 30%;*/
    /*!*height: 70%;*!*/
    /*!*max-height: 700px;*!*/
    /*width: 80%;*/
    width: 400px;
    max-height: 100vh;
    z-index: 6;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    background: white;
    overflow-y: auto;
    overflow-x: hidden;
}
.settings_popup.mobile{
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    max-height: none;
    max-width: none;
}

.image_popup{
    width: 80%;
    left: 10%;
    height: auto;
    z-index: 6;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    background: white;
}

@media (max-width: 769px) {
    .settings_popup {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        max-height: none;
        max-width: none;
    }
    .popup-body {
        max-height: none;
        height: calc(100vh - 46px);
    }
}

.settings_popup__close{
    position: absolute;
    cursor: pointer;
    margin: 5px 10px;
    right: 10px;
}

/* ==============================
   2.16 Announcement
  ============================== */

.announcement__container{
    padding:5px;
    height: 100%;
}
.announcement__header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:10px;
}
.announcement__title{
    font-size: 16px;
    line-height: 24px;
    padding-top: 3px;
    padding-left: 5px;
    font-weight: 600;
    flex: 1;
}

.announcement__sub_title{

}

.announcement_setting__list_item{
    padding: 0px 16px;

}

.announcement__detail{
    display:flex;
    padding:0 5px 5px 5px;
}
.announcement__image {
    width:80px;
    margin:5px 10px 5px 0;
    background-size:cover;
    background-position:50%;
}
.announcement__container.linked:hover{
    background: #EBEBEB;
    cursor: pointer;
}

.announcement__content {
    flex: 1;
    font-size: 14px;
    line-height: 22px;
    overflow-wrap: break-word;
}

.announcement__filepicker_container{
    width: 100%;
}

.announcement__image_uploader{
    width: 100%;
    height: 120px;
    background: #e2e2e2;
    text-align: center;
    vertical-align: middle;
    line-height: 120px;
    cursor: pointer;
}

.announcement__image_uploader .announcement_img{
    width:auto;
    height: 100%;
    max-height: 160px;
}

/* ==============================
    2.17 VIP info
  ============================== */
/*.vip__container{*/
/*padding: 24px 20px;*/
/*background: white;*/
/*}*/

/*.vip__title{*/
/*color: #00BFFF;*/
/*}*/
/*.vip__detail{*/
/*margin-top: 10px;*/
/*color: dimgray;*/
/*font-size: 16px;*/
/*}*/

/*.vip__detail ul li{*/
/*list-style-type: circle;*/
/*margin-left: 20px;*/

/*}*/

/*.vip__button {*/
/*width: 90%;*/
/*margin: 20px 5% 10px;*/
/*color:#00BFFF;*/
/*}*/

/* ==============================
    2.18 Image Detail
  ============================== */

.image_detail{
    height: 100%;
    width: 100%;
    position: fixed;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    justify-content: center;
    align-items: center;
    align-content: space-between;
}

.image_detail img{
    max-width:90%;
    max-height: 90%;
    background:rgba(0,0,0,0.7);
    display: block;
    margin:0 auto;
}

.image_detail__helper{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    position: fixed
}

/* ==============================
    2.19 Discover
   =============================== */

.discover__container{
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position:relative;
    width: 100%;
    border-top: 1px solid #ddd;
    flex:1;
    max-height: 413px;
    min-height: 200px;
    padding: 10px 0;
}

.discover__content{
    flex:1;
    flex-direction:column;
}

.discover__list{
    padding:10px;
    border-bottom:1px dashed #eee;
    cursor: pointer;
    height:auto;
}
.discover__list:hover{
    background: #fafafa;
}
.discover__list_empty {
    font-size: 14px;
    color: #999;
    justify-content: center;
}
.discover__type{
    font-size: 16px;
    margin: 0 10px;
    border-bottom: 1px dashed #ddd;
}

.discover__msg_container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.discover__avatar{
    background-color: #f2f2f2 !Important;
    background-size: cover;
    background-position: 50% 50%;
    width: 30px !important;
    height: 30px !important;
    margin-right: 10px !important;
    margin-top:3px !important;
}

.discover__room_name{
    display:block;
    font-size:14px;
}

/* ==============================
   4.4 badge_unlock popup
  ============================== */

.badge__unlock {
    background: url(http://cdn.xianliao.me/images/c59a59e9bb366e5978386f12a969eee5.png);
    background-size: 1500px;
    zoom: 1;
    position: relative;
}

.badge__unlock.badge__vip {
    background-position: 1262px 1258px;
    width: 50px;
    height: 50px;
}

.badge__unlock.badge__sofa {
    background-position: 1412px 1480px;
    width: 50px;
    height: 50px;
}

/* ==============================
   4.5 ads popup
  ============================== */

.ads_popup_container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.ads_popup_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.5);
    cursor:pointer;
}

.ads_popup_small_ads_container {
    display: flex;
    position: absolute;
    top: 70px;
    align-items: center;
    justify-content: center;
    width:100%;
    overflow:hidden;
    padding-bottom:5px;
}


.ads_popup_inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;

}

.ads_popup_small_ads_container .ads_popup_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transform:translate3d(0,-500px,0);
    -webkit-animation: smalladslidein 1s ease forwards;
    -webkit-animation-delay: 2s;
    animation: smalladslidein 1s ease forwards;
    animation-delay: 2s;

}



.ads_popup_close {
    z-index: 10;
    position: absolute;
    right: 9px;
    left: auto;
    top: 9px;
    min-width: 0;
    width: 21px;
    min-height: 0;
    height: 21px;
    background:rgba(255,255,255,0.85) !important;
}

.ads_close_vanish {
    pointer-events: none;
}

.ads_popup_small_ads_container .ads_popup_close {
    left: 7px;
    right:auto;
}

.xianliao_component .ads_popup_close {
    left: 7px;
    right:auto;
}


.ads_popup {
    background-color: white;
}


@-webkit-keyframes smalladslidein {
    0% { transform:translate3d(0,-500px,0);opacity:0}
    100% { transform:translate3d(0,0,0);opacity:1}
}

@keyframes smalladslidein {
    0% { transform:translate3d(0,-500px,0);opacity:0}
    100% { transform:translate3d(0,0,0);opacity:1 }
}


.ads_popup_join {
    font-size: 13px;
    text-align: center;
    width: 100%;
    transition: all 0.3s ease;
    display: block;
}

.ads_popup_join:hover {
    color:black;
}


/* ==============================
    NEXUS
  ============================== */
.nexus_banner_container {
    position: absolute;
    bottom: 0px;
    height: 100px;
    width: 400px;
    left: 50%
}

.nexus_panel_container {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

.nexus_mini_container {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 100px;
    width: 100px;
}






/* ==============================
   4.4 Slick
  ============================== */

.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    height: 100%;
    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    height:100%;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    width: 100%;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: flex;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: flex;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: flex;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/* Slick Theme */

@charset "UTF-8";
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('./slick-fonts/ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./slick-fonts/slick.eot');
    src: url('./slick-fonts/slick.eot?#iefix') format('embedded-opentype'), url('./slick-fonts/slick.woff') format('woff'), url('./slick-fonts/slick.ttf') format('truetype'), url('./slick-fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 30px;
    height: 30px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;

    z-index: 10;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: 0;
    cursor: auto;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick, Arial, Helvetica, sans-serif';
    font-size: 30px;
    line-height: 1;
    opacity: 1;
    color: white;
    text-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: 5px;
}
[dir='rtl'] .slick-prev
{
    right: 5px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: 5px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: 5px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -20px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}
/* This makes slick-slider display properly within display-flex container */
* {
    min-height: 0;
    min-width: 0;
}